<template>
  <div class="wrapper">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      label-position="top"
    >
      <dl class="config">
        <dt>基础设置</dt>
        <dd>
          <el-form-item label="列表名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <el-form-item label="布局设置" prop="layout">
            <el-radio-group v-model="ruleForm.layout">
              <div class="el-card-container">
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <label>
                    <img src="@/assets/list.png" class="image" />
                    <div>
                      <span><el-radio label="列表" /></span>
                    </div>
                  </label>
                </el-card>

                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <label>
                    <img src="@/assets/menu.png" class="image" />
                    <div>
                      <span><el-radio label="目录" /></span>
                    </div>
                  </label>
                </el-card>

                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <label>
                    <img src="@/assets/card.png" class="image" />
                    <div>
                      <span><el-radio label="卡片" /></span>
                    </div>
                  </label>
                </el-card>
              </div>
            </el-radio-group>
          </el-form-item>
        </dd>
      </dl>

      <div class="custom-space"></div>

      <dl class="config">
        <dt>预览设计</dt>
        <dd>
          <el-row>
            <el-col :span="20">
              <el-form-item>
                <el-input v-model="ruleForm.url" />
              </el-form-item>
            </el-col>
            <el-col :span="1"> </el-col>
            <el-col :span="2" class="copy-view">
              <el-form-item>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="复制"
                  placement="top"
                >
                  <el-icon style="font-size: 18px">
                    <DocumentCopy />
                  </el-icon>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="访问"
                  placement="top"
                >
                  <el-icon style="font-size: 18px; margin-left: 15px">
                    <View />
                  </el-icon>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
        </dd>
      </dl>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const ruleFormRef = ref();
const ruleForm = reactive({
  name: "Hello",
  desc: "",
  layout: "",
  url: "",
});

const rules = reactive({
  name: [
    {
      required: true,
      trigger: "blur",
      message: "请输入列表名称",
    },
    {
      min: 3,
      max: 5,
      message: "Length should be 3 to 5",
      trigger: "blur",
      informType: "warning",
    },
  ],
  desc: [{ required: true, message: "请输入描述内容", trigger: "blur" }],
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style lang="less" scoped>
.wrapper {
  width: 850px !important;
  margin: 0 auto !important;
  height: auto!important;
}
.config {
  background: rgb(255, 255, 255);
  padding: 15px;
  border-radius: 5px;

  dt {
    font-weight: bold;
    margin-bottom: 15px;
  }
}

.config /deep/ .el-form-item__content {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.config /deep/ .el-radio-group {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.config /deep/ .el-card-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.config /deep/ .el-card {
  cursor: pointer !important;
  text-align: center !important;
  border: 0 !important;

  label {
    cursor: pointer !important;
  }
}

.copy-view /deep/ .el-form-item {
  height: 100% !important;
}

.copy-view /deep/ .el-form-item__content {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}
</style>
